<!-- 参数管理新增、修改 -->
<template>
  <div>
    <el-dialog :title="paramData.title" :visible.sync="paramData.showModal" width="700px" :close-on-click-modal="false" top="5vh">
      <el-form label-width="140px" :model="data" ref="update" :rules="rules" v-loading="showLoading" :element-loading-text="$t('lan.dataLoading')">
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.paramsName')" prop="name">
              <el-input size="medium" v-model="data.name" :placeholder="$t('lan.pleaseParamsName')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.paramsCode')" prop="code">
              <el-input size="medium" v-model="data.code" :disabled="paramData.type=='edit'" :placeholder="$t('lan.pleaseParamsCode')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.paramsType')" prop="type">
              <el-select v-model="data.type" size="medium" :placeholder="$t('lan.selectParamsType')">
                <el-option v-for="item in typeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="data.type== '1'">
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.paramsValue')">
              <el-input size="medium" v-model="testValue" :placeholder="$t('lan.pleaseParamsValue')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="data.type== '2'">
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.uploadImg')">
              <el-upload class="upload-demo" action="http://121.40.240.199/bee/member/fileUpload" name="uploadFile" :show-file-list="false" :headers="tokenimg" :on-success="onSuccess" :before-upload="beforeUpload" :limit="1">
                <el-button size="small" type="primary">{{$t('lan.clickUpload')}}</el-button>
                <div>
                  <img v-if="url" :src="url" class="imgbox">
                </div>
                <div slot="tip" class="el-upload__tip">{{$t('lan.only500')}}</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.remark')" prop="remark">
              <el-input size="medium" rows="3" type="textarea" v-model="data.remark" :placeholder="$t('lan.pleaseRemark')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="save">{{$t('lan.submit')}}</el-button>
        <el-button size="medium" @click="paramData.showModal = false">{{$t('lan.cancel')}}</el-button>
      </span>
      <!-- 底部按钮结束 -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["paramData"],
  data () {
    return {
      uploadFile: "", // 图片的文件名称
      tokenimg: { token: sessionStorage.getItem("token") }, // 图片请求头
      typeList: [], // 类型列表
      //表单校验
      rules: {
        code: [
          { required: true, message: this.$t('lan.paramsCodeEmpty'), trigger: "blur" }
        ],
        name: [
          { required: true, message: this.$t('lan.paramsNameEmpty'), trigger: "blur" }
        ],
        remark: [{ required: true, message: this.$t('lan.remarkEmpty'), trigger: "blur" }],
        type: [{ required: true, message: this.$t('lan.selectParamsType'), trigger: "blur" }],
      },
      showLoading: false, //是否显示loading
      data: {
        id: '', // 索引Id
        code: "", // 参数代码
        name: "", // 参数名称
        paramValue: "", //参数值
        remark: "", // 备注
        type: "", // 参数类型    
      },
      url: '', // 先暂存图片地址
      testValue: '', // 先暂存文字内容
    };
  },
  methods: {
    // 图片上传成功后，后台返回图片的路径
    onSuccess (res) {
      if (res.code == 200) {
        this.url = res.data;
      }
    },
    // 图片校验
    beforeUpload (file) {
      var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt5KB = file.size / 1024 / 500 < 1;
      if (!testmsg) {
        this.$message.error(this.$t('lan.uploadFormat'));
      }
      if (!isLt5KB) {
        this.$message.error(this.$t('lan.uploadSize500'));
      }
      return testmsg && isLt5KB;
    },
    // 获取字典表
    async getterm () {
      this.typeList = await this.common.enumsList("PARAM_TYPE");
      if (this.paramData.type == 'create') {
        this.data.type = "1";
      }
    },
    //新增、修改参数
    save () {
      this.$refs["update"].validate(async valid => {
        if (valid) {
          if (this.data.type == "2") {
            if (this.url == '') {
              this.$message({ message: this.$t('lan.pleaseUpload'), type: 'error' })
              return;
            }
            this.data.paramValue = this.url;
          } else {
            if (this.testValue == '') {
              this.$message({ message: this.$t('lan.paramsValueEmpty'), type: 'error' })
              return;
            }
            this.data.paramValue = this.testValue;
          }
          let url =
            this.paramData.type == "create" ? "/params/save" : "/params/update";
          let httpMethod = this.paramData.type == "create" ? "POST" : "PUT";
          let result = await this.request.httpRequest(httpMethod, url, this.data);
          if (result.code == 200) {
            this.paramData.showModal = false;
            this.$message({ type: "success", message: result.msg });
            this.$emit("closeModal");
          } else {
            this.$message({ type: "error", message: result.msg });
          }
        }
      });
    },
    //获取详情
    async getDetail () {
      if (this.paramData.userId) {
        let url = `/params/get/${this.paramData.userId}`;
        let result = await this.request.httpRequest("GET", url);
        if (result.code == 200) {
          this.data.name = result.data.name;
          this.data.code = result.data.code;
          this.data.remark = result.data.remark;
          this.data.type = result.data.type;
          this.data.id = result.da
          if (this.data.type == '1') {
            this.testValue = result.data.paramValue;
          } else {
            this.url = result.data.paramValue;
          }
        } else {
          this.$message({ type: "error", message: result.msg });
        }
      }
    }
  },
  mounted () {
    this.getterm();
    this.getDetail();
  }
};
</script>
<style scoped>
</style>